<template>
  <div class="previewer_container" v-if="isShow" @click="close">
    <div class="previewer_wrapper"></div>
    <div class="previewer_content">
      <p>previewer</p>
      <img :src="imgUrl" alt="" style="width: 60%">
    </div>
  </div>
</template>

<script>
  export default {
    name: "previewer",
    data() {
      return {
        // isShow: {
        //   type: Boolean,
        //   default: true
        // }
      }
    },
    props: {
      imgUrl: {
        default: require('../assets/image/logo.png')
      },
      isShow: {
        type: Boolean,
        default: true
      }
    },
    mounted(){
      // setTimeout(()=>{
      //   console.log('this.props.imgUrl',this.imgUrl);
      // },2000)

    },
    methods: {
      close() {
        this.$emit('pre-close');
        // this.isShow = false
      }
    }
  }
</script>

<style scoped lang="scss">
  .previewer_container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 8px;
    left: 8px;
  }

  .previewer_wrapper {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
    position: absolute;
    z-index: 1;
  }

  .previewer_content {
    text-align: center;
    z-index: 99;
    position: absolute;
    /*left: 40%;*/
    top: 10%;
  }
</style>
